<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片接口测试</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; margin-top: 50px; }
        .image-container { margin: 20px auto; max-width: 500px; }
        img { max-width: 100%; height: auto; border: 1px solid #ddd; padding: 5px; }
        .status { font-weight: bold; margin-top: 10px; }
        .success { color: green; }
        .error { color: red; }
    </style>
</head>
<body>
    <h1>后端图片接口测试</h1>
    
    <div class="image-container">
        <h3>测试图片1 (u11.svg)</h3>
        <img id="image1" src="http://localhost:8080/api/images/u11.svg" alt="测试图片1">
        <div id="status1" class="status"></div>
    </div>
    
    <div class="image-container">
        <h3>测试图片2 (u27.svg)</h3>
        <img id="image2" src="http://localhost:8080/api/images/u27.svg" alt="测试图片2">
        <div id="status2" class="status"></div>
    </div>

    <script>
        // 测试图片加载状态
        function testImageLoad(imgId, statusId) {
            const img = document.getElementById(imgId);
            const status = document.getElementById(statusId);

            img.onload = function() {
                status.textContent = "图片加载成功!";
                status.className = "status success";
            };

            img.onerror = function() {
                status.textContent = "图片加载失败! 请检查图片文件是否存在于指定目录。";
                status.className = "status error";
            };
        }

        // 测试两张图片
        testImageLoad("image1", "status1");
        testImageLoad("image2", "status2");
    </script>
</body>
</html>